<!--
 * @Descripttion: 
 * @version: 
 * @Author: wangys
 * @Date: 2022-06-08 15:15:23
-->
<template>
  <div>
    <div class="Article-title">
      <div>博客</div>
      <div>共 {{ list.length }} 篇</div>
    </div>
    <div
      class="ArticleItem-container"
      v-for="(item, index) in list"
      :key="index"
    >
      <!-- 左边文字部分 -->
      <div class="left">
        <div class="left-in">
          <div class="title base-overflow" @click="handleToDetail">
            {{ item.title }}
          </div>
          <div class="content base-overflow">
            {{ item.detail }}
          </div>
          <div class="footer">
            <div class="sign">
              <!-- 发表人 -->
              <div class="item">
                <div>
                  <img src="https://s1.ax1x.com/2020/05/02/Jj88UJ.jpg" alt="" />
                </div>
                <div class="name">啊丢</div>
              </div>
              <!-- 发表日期 -->
              <div class="item">
                <i class="iconfont icon-shijian"></i>
                <span>{{ item.time }}</span>
                <span></span>
              </div>
              <!-- 访问量 -->
              <div class="item">
                <i class="iconfont icon-yanjing"></i>
                <span>{{ item.view }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边的图片部分 -->
      <div class="right">
        <img :src="item.img" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Article',
  data() {
    return {
      list: [
        {
          title: '2022新一代百度网盘高速下载神器“antdownload 3.0.6”你用过吗',
          detail:
            '自从度盘PanDownload的作者被请去喝茶之后，很多网盘下载神器也都陆续倒下，速盘SpeedPan、亿寻都不行了，但是大家对百度网盘高速下载神器的需求却是丝毫不减的，',
          img: 'https://s1.ax1x.com/2022/12/29/pSSXkh8.jpg',
          time: '2022-09-22',
          view: '10'
        },
        {
          title: 'win10激活工具',
          detail: 'win10激活工具',
          img: 'https://s1.ax1x.com/2022/12/29/pSSXkh8.jpg',
          time: '2022-11-26',
          view: '20'
        }
      ]
    }
  },
  methods: {
    handleToDetail() {
      this.$router.push({ path: '/home/article-details' })
    }
  }
}
</script>

<style lang="less" scoped>
.Article-title {
  width: 680px;
  height: 70px;
  display: flex;
  justify-content: space-between;
  line-height: 70px;
  padding: 0 20px;
  font-size: 18px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.ArticleItem-container {
  display: flex;
  width: 680px;
  height: 200px;
  border: 1px solid #ccc;
  margin-top: -1px;
  // 左边部分
  .left {
    width: 440px;
    height: 100%;
    margin-left: 45px;
    // 标题
    .title {
      margin: 20px 0;
      font-size: 24px;
      font-weight: 600;
      &:hover {
        cursor: pointer;
      }
    }
    // 内容
    .content {
      width: 440px;
      height: 40px;
      font-size: 14px;
    }
    .base-overflow {
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
      overflow: hidden;
    }
    // 底部
    .footer {
      .sign {
        display: flex;
        height: 24px;
        margin: 10px 10px 10px 0;
        .item {
          display: flex;
          margin-left: 10px;
          text-align: center;
          line-height: 24px;
          // 小图标
          img {
            width: 22px;
            height: 22px;
            border-radius: 50%;
          }
          // 姓名
          .name {
            line-height: 24px;
            margin-left: 5px;
          }
          // 时间和阅读量
          span {
            padding-left: 5px;
          }
        }
      }
    }
  }
  // 右边部分
  .right {
    flex: 1;
    position: relative;
    img {
      margin: 40px 0 0 40px;
      width: 100px;
      height: 100px;
    }
    img:hover {
      transform: scale(1.2);
    }
  }
}
</style>
